<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蓝桥公司年会抽奖</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div id="app">
      <h1>{{title}}</h1>
      <div class="content">
        <div class="roll_content" :style="moveCss">
          <div class="li" v-for="(item,index) in items" :key="index">
            {{item.heroname}}
          </div>
        </div>
        <div class="list_mask"></div>
      </div>
      <div class="startBtn" v-show="showBtn" @click="init">开始</div>
    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          title: "蓝桥公司年会抽奖",
          showBtn: true,
          awardId: 5001238,
          moveCss: "",
          itemWidth: 113,
          luckyNums: 0, //中奖索引
          lnStart: 60,
          lnEnd: 65,
          items: [],
          awardItem: { itemid: 0, pz: 0, heroid: 0, heroname: "" }, //中奖者
          itemList: [
            { itemid: 5001238, pz: 1, heroname: "小郭", gl: 8 },
            { itemid: 5001537, pz: 1, heroname: "小丁", gl: 8 },
            { itemid: 5001447, pz: 1, heroname: "小孙", gl: 8 },
            { itemid: 5004400, pz: 1, heroname: "许钟豪", gl: 8 },
            { itemid: 5001167, pz: 1, heroname: "姚明", gl: 8 },
            { itemid: 5000451, pz: 1, heroname: "小吴", gl: 8 },
            { itemid: 5004205, pz: 2, heroname: "张镇麟", gl: 6 },
            { itemid: 5004183, pz: 2, heroname: "赵继伟", gl: 6 },
            { itemid: 5003722, pz: 2, heroname: "周琦", gl: 6 },
            { itemid: 5003387, pz: 2, heroname: "郭艾伦", gl: 6 },
            { itemid: 5001876, pz: 2, heroname: "小丁", gl: 6 },
            { itemid: 5004601, pz: 3, heroname: "沙拉木", gl: 3 },
            { itemid: 5004602, pz: 3, heroname: "许钟豪", gl: 3 },
            { itemid: 5004603, pz: 3, heroname: "姚明", gl: 3 },
            { itemid: 5004604, pz: 3, heroname: "小韩", gl: 3 },
            { itemid: 5004598, pz: 4, heroname: "张镇麟", gl: 2 },
            { itemid: 5004599, pz: 4, heroname: "赵继伟", gl: 2 },
            { itemid: 5004600, pz: 4, heroname: "周琦", gl: 2 },
            { itemid: 5004596, pz: 5, heroname: "郭艾伦", gl: 1 },
            { itemid: 5004597, pz: 5, heroname: "丁彦雨航", gl: 1 },
            { itemid: 5004605, pz: 0, heroname: "沙拉木", gl: 1 },
            { itemid: 5004606, pz: 0, heroname: "赵继伟", gl: 1 },
          ],
        },
        mounted() {
          this.items = this.itemList;
          this.awardId =
            this.itemList[this.getRand(0, this.itemList.length)].itemid;
        },
        methods: {
          init() {
            this.items = [];
            this.luckyNums = this.getRand(this.lnStart, this.lnEnd);
            let start =
              this.lnEnd - this.luckyNums < 4 ? this.luckyNums + 4 : this.lnEnd;
            for (let i = start, num = 0; num < start; num++) {
              var obj = {};
              num + 1 == this.luckyNums
                ? ((obj = this.itemList.filter((i) => {
                    return i.itemid == this.awardId;
                  })[0]),
                  (this.awardItem = obj))
                : (obj = this.getItem()),
                this.items.push(obj);
            }
            axios
              .get(
                "http://127.0.0.1:8080/lucky/?name=" + this.awardItem.heroname
              )
              .then((data) => {
                if (data.data == "ok") {
                  this.showBtn = false;
                }
              });
            this.moveCss = {
              left: -this.itemWidth * (this.luckyNums - 8) + "px",
              transition: " all 8s cubic-bezier(0.1, 0.59, 0.1, 0.9) 0s",
            };
            setTimeout(() => {
              this.title = "恭喜" + this.awardItem.heroname + "中奖";
            }, 8000);
          },
          getRand(start, length) {
            return Math.floor(Math.random() * (length - start + 1) + start);
          },
          // 随机子项
          getItem() {
            for (
              var t, randomNum = this.getRand(1, 100), e = 0, n = 0;
              n < this.itemList.length;
              n++
            ) {
              if (((e += this.itemList[n].gl), e >= randomNum)) {
                t = this.itemList[n];
                break;
              }
            }
            return t;
          },
        },
      });
    </script>
  </body>
</html>
